<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
    <tr>
    <td style="padding: 0 10px;">
      <input v-model="params.keywords" placeholder="请输入商品ID或标题" @keyup.enter="init"
             class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox keywords_input_search_box"
             type="text"> </input>
    </td>
    <td>
      <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
              class="l-btn-text">查询</span></span></a>
      <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
              class="l-btn-text">重载</span></span></a>
    </td>
    </tr>
    </tbody>
  </table>
</div>
<div class="con" id="goodsPackageGoodsSelectCon" style="-moz-user-select:none;">
  <table id="goodsPackageGoodsSelectBox"></table>
</div>
<script>
  var goodsPackageGoodsSelectVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        keywords: '',
        goods_id: '',
      },
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
    },
    methods: {
      mounted: function (){
        this.init();
      },
      init: function () {
        goodsPackageGoodsSelectReload();
      },
      submit: function ($goodsArr){
        if($goodsArr instanceof Array && $goodsArr.length && 'undefined' !== typeof goodsPackageEditVm) {
          for (let i = 0; i < $goodsArr.length; i++){
            if($.inArray($goodsArr[i].id, goodsPackageEditVm.innerGoodsIds) === -1){
              $goodsArr[i].number = $goodsArr[i].number?$goodsArr[i].number:1;
              goodsPackageEditVm.innerGoodsIds.push($goodsArr[i].id);
              goodsPackageEditVm.innerGoodsListTemp.push($goodsArr[i]);
            }
          }
        }
        goodsPackageEditVm.updateVMData();
      },
    }
  });

  var goodsPackageGoodsSelectReload = function () {
    if(goodsPackageGoodsSelectVm.initLoad){
      goodsPackageGoodsSelectVm.initLoad = false;
    }else{
      $("#goodsPackageGoodsSelectBox").datagrid('load', goodsPackageGoodsSelectVm.params);
    }
  };

  $('#goodsPackageAddGoodsSelectSubmit').click(function(){
    let $selectedGoods = $('#goodsPackageGoodsSelectBox').datagrid('getChecked');
    if($selectedGoods.length){
      goodsPackageGoodsSelectVm.submit($selectedGoods);
      $("#goodsPackageEditdlg").dialog('close');
    }else{
      $.messager.alert('提示', '请先选择商品！', 'warning');
    }
  });

  var goodsPackageGoodsSelectSearch = function () {
    $("#goodsPackageGoodsSelectBox").datagrid({
      title: '',
      width: 798,
      height: 538,//高度
      singleSelect: false,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'id',
      sortOrder: 'desc',
      idField: 'id',
      url: '/admin/goodspackage/getgoodslist',
      queryParams: goodsPackageGoodsSelectVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: true,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'',title:'ID', width: fixWidth(5), align: "center", halign: 'center', checkbox:'true'},
        {field:'id',title:'商品ID', width: fixWidth(5), align: "center", halign: 'center'},
        {field:'title',title:'商品详情', width: fixWidth(30), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            let goods_info = '';
            if(rowData.image){
              goods_info += '<div style="display: flex" class="goodsinfo_wenzi">';
              goods_info += '<div style="width: 32px; display: flex; align-items: center;">' +
                      '<img style="width: 30px; height: 30px; border-radius: 5px; border:1px solid #eee; overflow: hidden;" src="'+rowData.image+'">' +
                      '</div>';
              goods_info += '<div style="width: calc(100% - 42px); padding-left: 10px; text-align: left;">';
            }else{
              goods_info += '<div class="goodsinfo_wenzi" style="text-align: left;">';
            }
            goods_info += value + '<br><span>';
            goods_info += rowData.is_sku?'多规格':'单规格';
            goods_info += '</span></div>';
            if(rowData.image){goods_info += '</div>';}
            return goods_info;
          }},
        {field:'price',title:'价格', width: fixWidth(10), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value:'-';
          }},
        {field:'stock',title:'库存', width: fixWidth(10), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value:'0';
          }},
        {field:'created_at',title:'添加时间', width: fixWidth(10), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value:'--';
          }},
      ]],
      onLoadSuccess: function (data){
        if(data.total && data.rows.length && 'undefined' !== typeof goodsPackageEditVm && goodsPackageEditVm.innerGoodsIds.length){
          $.each(data.rows, function(key, row) {
            let id_index = $.inArray(row.id, goodsPackageEditVm.innerGoodsIds);
            if(id_index > -1){
              row.number = goodsPackageEditVm.innerGoodsListTemp[id_index].number;
              $("#goodsPackageGoodsSelectBox").datagrid('checkRow', key);
            }else{
              $("#goodsPackageGoodsSelectBox").datagrid('uncheckRow', key);
            }
          });
        }

      }
    });
    goodsPackageGoodsSelectVm.initLoad = true;
  };
  onDatagridResize("#goodsPackageGoodsSelectBox");
  goodsPackageGoodsSelectSearch();
</script>
<style>
  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }
  .goodsinfo_wenzi{
    color: #023d75;
  }
  .goodsinfo_wenzi span{
    color: #754302;
  }
  #goodsPackageGoodsSelectCon td{
    line-height: 1.2em !important;
    padding: 3px 0 !important;
  }
</style>